<template>
  <div class="flow-penal">
    <div id="flowchartContainer" class="container" ref="flowchartRef">
      <template v-for="(node,index) in data.nodeList" :key="node.id">
        <flow-node :id="1+node.id" :node="node"></flow-node>
      </template>
      <div style="position: absolute; top: 80%; left: 70%;background-color: blue;"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch, nextTick, computed } from "vue";
import lodash from "lodash";
import { jsPlumb } from "jsplumb";
import flowNode from "@/components/flowDesign/flowNode/node.vue";
import { jsplumbSetting, jsplumbConnectOptions, jsplumbSourceOptions, jsplumbTargetOptions } from "@/components/flowDesign/dicts/mixins.js";
import { dataB } from "@/components/flowDesign/dicts/data_B.js";
const loadEasyFlowFinish = ref(false); // 是否加载完毕标志位
const props = defineProps({
  flowData: {
    type: Object,
    default: dataB
  }
});
const data = ref(props.flowData)
const flowchartRef = ref({})
watch(() => props.flowData,
  (val) => {
    data.value = val
  },
  {
    deep: true,
    immediate: true
  }
)
let jsplumb = ref(null); // jsplumb 实例
const easyFlowVisible = ref(true); // 控制画布销毁
const flowchartOne = ref(null);
onMounted(() => {
  jsplumb.value = jsPlumb.getInstance();
  easyFlowVisible.value = false;
  nextTick(() => {
    easyFlowVisible.value = true;
    data.value = props.flowData;
    nextTick(() => {
      jsplumb.value = jsPlumb.getInstance();
      nextTick(() => {
        init();
      });
    });
  });
  cutSize()
});
// 加载默认流程图
const loadEasyFlow = () => {
  // 初始化节点
  if (data.value.nodeList) {
    for (var i = 0; i < data.value.nodeList.length; i++) {
      let node = data.value.nodeList[i];
      jsplumb.value.makeSource(node.id, lodash.merge(jsplumbSourceOptions, {})); // 设置源点，可以拖出线连接其他节点
      jsplumb.value.makeTarget(node.id, jsplumbTargetOptions); // 设置目标点，其他源点拖出的线可以连接该节点
      if (!node.viewOnly) {
        jsplumb.value.draggable(node.id, {
          containment: "parent",
          stop: function (el) { }
        });
      }
    }
    // 初始化连线
    for (var i = 0; i < data.value.lineList.length; i++) {
      let line = data.value.lineList[i];
      var connParam = {
        source: line.from,
        target: line.to
      };
      jsplumb.value.connect(connParam, jsplumbConnectOptions);
    }
  }
  nextTick(() => {
    loadEasyFlowFinish.value = true;
  });
};
const init = () => {
  jsplumb.value.ready(() => {
    // 导入默认配置
    jsplumb.value.importDefaults(jsplumbSetting)
    jsplumb.value.setSuspendDrawing(false, true); // 会使整个jsPlumb立即重绘。
    // 完成连线前的校验
    jsplumb.value.bind('beforeDrop', evt => {
      const res = () => { } // 此处可以添加是否创建连接的校验， 返回 false 则不添加；
      return res
    })
    jsplumb.value.draggable(flowchartContainer);
    loadEasyFlow()
  })
}


const baseZoom = ref(0.5);
const cutSize = () => {
  const zoom = baseZoom.value;
  flowchartRef.value.style.transform = `scale(${zoom})`;
  flowchartRef.value.style.WebkitTransform = `scale(${zoom})`;
  flowchartRef.value.style.MozTransform = `scale(${zoom})`;
  flowchartRef.value.style.MsTransform = `scale(${zoom})`;
  flowchartRef.value.style.OTransform = `scale(${zoom})`;
  jsplumb.value.setZoom(zoom);
}
</script>
<style scoped>
@import "@/components/flowDesign/styles/leftIndex.css";
.flow-penal {
  height: calc(100vh);
  widows: calc(100vw);

  .container {
    height: 150%;
    width: 150%;
  }
}
</style>